<script setup>
import { reactive, ref, onMounted } from "vue";
import api from "../../api/index";
import { useStore } from 'vuex'
import { RouterLink, useRouter } from "vue-router";

const router = useRouter();
const store = useStore()
const accountsSession = reactive([])//这是一个数组
const account_form = reactive({
  account_userid:'',
  account_email:'',
  account_firstname:'',
  account_lastname:'',
  account_status:'',
  account_addr1:'',
  account_addr2:'',
  account_city:'',
  account_state:'',
  account_zip:'',
  account_country:'',
  account_phone:'',
  account_favCategory:''
})
const account = reactive({
  account_userid:'0',
  account_email:'',
  account_firstname:'',
  account_lastname:'',
  account_status:'',
  account_addr1:'',
  account_addr2:'',
  account_city:'',
  account_state:'',
  account_zip:'',
  account_country:'',
  account_phone:'',
  account_favCategory:''
})

//页面刚出现时调用的方法
onMounted(() => {
  console.log(store.state.account_userid);
  account.account_userid=store.state.account_userid;
  account.account_email=store.state.account_email;
  account.account_firstname=store.state.account_firstname;
  account.account_lastname=store.state.account_lastname;
  account.account_status=store.state.account_status;
  account.account_addr1=store.state.account_addr1;
  account.account_addr2=store.state.account_addr2;
  account.account_city=store.state.account_city;
  account.account_state=store.state.account_state;
  account.account_zip=store.state.account_zip;
  account.account_country=store.state.account_country;
  account.account_phone=store.state.account_phone;
  account.account_favCategory=store.state.account_favCategory;
  console.log(account.account_userid);
  getData();
  console.log("6");
})
//页面刚出现时调用的方法
const getData = () => {
  //直接获取前端的session对象存入当前页面
  account_form.account_userid=store.state.account_userid;
  account_form.account_email=store.state.account_email;
  account_form.account_firstname=store.state.account_firstname;
  account_form.account_lastname=store.state.account_lastname;
  account_form.account_status=store.state.account_status;
  account_form.account_addr1=store.state.account_addr1;
  account_form.account_addr2=store.state.account_addr2;
  account_form.account_city=store.state.account_city;
  account_form.account_state=store.state.account_state;
  account_form.account_zip=store.state.account_zip;
  account_form.account_country=store.state.account_country;
  account_form.account_phone=store.state.account_phone;
  account_form.account_favCategory=store.state.account_favCategory;
  //测试后端向前端传数据，成功！
  // api.getAccountForm().then(res => {
  //   //这里首先要判断一下状态码
  //   var statusCode = res.data.status;
  //   console.log("statusCode is : "+statusCode);
  //   accountsSession.splice(0, accountsSession.length)//清空旧数据
  //   accountsSession.push(...res.data.data);//update,from date results,第一个data是http里的，这个data包括我们的status,message和data。第二个data是我们commonResponse里面的，存的就是orderList.
  //   console.log(ordersSession);
  //   //存给account_form
  //   account_form.userid=accountsSession[0].userid;
  //   account_form.email=accountsSession[0].email;
  //   account_form.firstname=accountsSession[0].firstname;
  //   account_form.lastname=accountsSession[0].lastname;
  //   account_form.status=accountsSession[0].status;
  //   account_form.addr1=accountsSession[0].addr1;
  //   account_form.addr2=accountsSession[0].addr2;
  //   account_form.city=accountsSession[0].city;
  //   account_form.state=accountsSession[0].state;
  //   account_form.zip=accountsSession[0].zip;
  //   account_form.country=accountsSession[0].country;
  //   account_form.phone=accountsSession[0].phone;
  //   account_form.favcategory=accountsSession[0].favcategory;
  //
  //
  //   //存给ordersSession，持久化对象，这就是前端存储session的方法！一共28个属性！
  //   store.commit("setAccountUserid",accountsSession[0].userid);
  //   store.commit("setAccountEmail",accountsSession[0].email);
  //   store.commit("setAccountFirstname",accountsSession[0].firstname);
  //   store.commit("setAccountLastname",accountsSession[0].lastname);
  //   store.commit("setAccountStatus",accountsSession[0].status);
  //   store.commit("setAccountAddr1",accountsSession[0].addr1);
  //   store.commit("setAccountAddr2",accountsSession[0].addr2);
  //   store.commit("setAccountCity",accountsSession[0].city);
  //   store.commit("setAccountState",accountsSession[0].state);
  //   store.commit("setAccountZip",accountsSession[0].zip);
  //   store.commit("setAccountCountry",accountsSession[0].country);
  //   store.commit("setAccountPhone",accountsSession[0].phone);
  //   store.commit("setAccountFavcategory",accountsSession[0].favcategory);
  // })
}

const signOff = () =>{
  //清除客户端的session
  store.commit("setAccountUserid",'');
  store.commit("setAccountEmail",'');
  store.commit("setAccountFirstName",'');
  store.commit("setAccountLastName",'');
  store.commit("setAccountStatus",'');
  store.commit("setAccountAddr1",'');
  store.commit("setAccountAddr2",'');
  store.commit("setAccountCity",'');
  store.commit("setAccountState",'');
  store.commit("setAccountZip",'');
  store.commit("setAccountCountry",'');
  store.commit("setAccountPhone",'');
  store.commit("setAccountfavCategory",'');
  //清楚服务端的session，这里又要请求服务器了，我先不写吧。
  //清楚页面中的account
  account.account_userid=store.state.account_userid;
  account.account_email=store.state.account_email;
  account.account_firstname=store.state.account_firstname;
  account.account_lastname=store.state.account_lastname;
  account.account_status=store.state.account_status;
  account.account_addr1=store.state.account_addr1;
  account.account_addr2=store.state.account_addr2;
  account.account_city=store.state.account_city;
  account.account_state=store.state.account_state;
  account.account_zip=store.state.account_zip;
  account.account_country=store.state.account_country;
  account.account_phone=store.state.account_phone;
  account.account_favCategory=store.state.account_favCategory;
  //重返本页面
  // 使用 location.reload() 方法重新刷新页面
  location.reload();
}

</script>

<template>
  <body>
  <div class="top-nav">
    <div class="container clearf">
      <div class="left">
        <router-link to="/main"><a class="item">首页</a></router-link>
      </div>
      <div class="right">

        <template v-if="account.account_userid !== undefined">
          <router-link to="/orders/listOrder"><a href="#" class="item">我的订单</a></router-link>
          <a @click="signOff" class="item">退出登录</a>
          <router-link to="/account/myAccountForm"><a href="#" class="item">个人主页</a></router-link>
        </template>

        <template v-else>
          <router-link to="/orders/listOrder"><a href="#" class="item">我的订单</a></router-link>
          <router-link to="/account/registerForm"><a href="#" class="item">注册</a></router-link>
          <router-link to="/account/signonForm"><a href="#" class="item">登录</a></router-link>
        </template>

      </div>
    </div>
    <div class="header">
      <div class="container clearf">
        <div class="col-2 logo">宠物商店</div>
        <div class="col-5 search-bar">

          <!--搜索栏目-->
          <form action="searchProduct" method="post" @submit.prevent="searchProducts">
            <input type="text"  id="keyword" name="keyword" size="14" v-model="searchKeyword"  />
            <router-link to="/catalog/SearchProducts" @click="searchProducts()">
              <button type="submit" name="searchProducts" value="Search">搜索</button>
            </router-link>
          </form>

          <div id="productAutoComplete" class="productAutoComplete">
            <ul id="productAutoList" class="productAutoList">
            </ul>
          </div>

        </div>

        <div class="col-2 cart">
          <router-link to="/cart/cart"><a href="#" class="item">我的购物车</a></router-link>
        </div>

      </div>
    </div>
    <div class="main-promote">
      <!--以上是头部信息-->
      <div>
        <form  action="MyAccountExchange" class="user-form"  method="post">
          <fieldset class="tab1">
            <div v-if="rmsg !== null" class="user-form-error">
              <p class="error-msg">{{ rmsg }}</p>
            </div>
            <h3 align="center">User Information</h3>
            <h4 align="center" id="feedback"></h4>
            <table class="table-view" align="center">
              <tr>
                <td>User ID:</td>
                <td><input type="text" name="name" id ="userid"  autocomplete="off" v-model="account_form.account_userid"/></td>
              </tr>
              <tr>
                <td>Password:</td>
                <td><input type="text" name="Password" /></td>
              </tr>
              <tr>
                <td>Repeat Password:</td>
                <td><input type="text" name="Password2" /></td>
              </tr>
            </table>

            <h3 align="center">Account Information</h3>
            <table class="table-view" align="center">
              <tr>
                <td>First name:</td>
                <td><input type="text" name="firstName" v-model="account_form.account_firstname" autocomplete="off" /></td>
              </tr>
              <tr>
                <td>Last name:</td>
                <td><input type="text" name="lastName" v-model="account_form.account_lastname" autocomplete="off"/></td>
              </tr>
              <tr>
                <td>Email:</td>
                <td><input type="text" name="email" v-model="account_form.account_email" autocomplete="off"/></td>
              </tr>
              <tr>
                <td>Phone:</td>
                <td><input type="text" name="phone" v-model="account_form.account_phone" autocomplete="off"/></td>
              </tr>
              <tr>
                <td>Address 1:</td>
                <td><input type="text" name="address1" v-model="account_form.account_addr1" autocomplete="off"/></td>
              </tr>
              <tr>
                <td>Address 2:</td>
                <td><input type="text" name="address2"  v-model="account_form.account_addr2" autocomplete="off"/></td>
              </tr>
              <tr>
                <td>City:</td>
                <td><input type="text" name="city" v-model="account_form.account_city" autocomplete="off"/></td>
              </tr>
              <tr>
                <td>State:</td>
                <td><input type="text" name="state" size="4" v-model="account_form.account_state" autocomplete="off"/></td>
              </tr>
              <tr>
                <td>Zip:</td>
                <td><input type="text" name="zip" size="10" v-model="account_form.account_zip" autocomplete="off"/></td>
              </tr>
              <tr>
                <td>Country:</td>
                <td><input type="text" name="country" size="15" v-model="account_form.account_country" autocomplete="off"/></td>
              </tr>
            </table>

            <h3 align="center">Profile Information</h3>

            <table class="table-view" align="center">
              <tr>
                <td>Language Preference:</td>
                <td><select name="languagePreference">
                  <option value="CHINESE">CHINESE</option>
                  <option value="ENGLISH">ENGLISH</option>
                </select> </td>
              </tr>
              <tr>
                <td>Favourite Category:</td>
                <td><select name="favouriteCategoryId" >
                  <option value="FISH">FISH</option>
                  <option value="DOGS">DOGS</option>
                  <option value="REPTILES">REPTILES</option>
                  <option value="CATS">CATS</option>
                  <option value="BIRDS">BIRDS</option>
                </select></td>
              </tr>
              <tr>
                <td>Enable MyBanner</td>
                <td><input type="checkbox" name="bannerOption" value="1" checked="${sessionScope.account.banneropt}"/></td>
              </tr>

            </table>
          </fieldset>
          <div class="user-input-item">
            <input type="submit" value="确定修改" class="user-form-submit1">
          </div>
        </form>
      </div>
      <!--      有个account.js-->
  <!--以下是尾部信息-->
  </div>
  </div>
  <div class="footer">
    <div class="container clearf">
      <div class="">

        增值电信业务经营许可证：浙B2-20080224|增值电信业务经营许可证（跨地区）： B2-20150210|浙网文【2022】0403-017号|浙江省网络食品销售第三方平台提供者备案：浙网食A33010001|

        互联网药品信息服务资格证书（浙）-经营性-2018-0010|短消息类服务接入代码使用证书：号【2016】00154-A01|信息网络传播视听许可证：1109364号|出版物网络交易平台服务经营备案号：新出发浙备字第002号|</div>
    </div>
  </div>
  </body>
</template>

<style scoped>
@import "../../assets/css/TopButtomMain.css";
@import "../../assets/css/order.css";
</style>